<template>
    <el-card class="big-card">
        <div class="box">
            <!-- 标题短竖线 -->
            <div class="short"></div>
            <div>新增团队信息</div>
        </div>
        <div class="teamInfo-container">
            <p>团队信息</p>
            <div class="info-box">
                <div>
                    <span>团队编号</span>
                    <input type="text" style="margin-bottom: 15px;" disabled>
                </div>
                <div>
                    <span>团队名称</span>
                    <input type="text" v-model="addTeamData.name" placeholder="请输入" style="margin-bottom: 15px;">
                </div>
                <div style="display: flex;">
                    <span style="margin: 10px 0 ;">团队头像</span>
                    <el-upload class="avatar-uploader" :action="`${baseURL}/images/upload`" :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="addTeamData.avatar" :src="addTeamData.avatar" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
                <div>
                    <span>所属机构</span>
                    <el-select size="large" style="width: 200px; margin-left: 15px;" placeholder="请选择"
                        v-model="addTeamData.organizationId">
                        <el-option v-for="item in AgencyData" :key="item._id" :label="item.name" :value="item._id" />
                    </el-select>
                </div>
                <div>
                    <span>团队标签</span>
                    <input type="text" placeholder="请选择" style="margin-bottom: 20px;">
                </div>
            </div>
        </div>

        <!-- 团队成员：当前登录 -->
        <div>团队成员</div>
        <el-card style="max-width: 340px;max-height: 300px; margin-top: 20px;">
            <div slot="header" class="card-header">
                <div class="avatar-info">

                    <img :src="doctorData.avatar">
                    <div class="name-role">
                        <span class="name">{{ doctorData.name }}</span>
                        <span class="role">{{ doctorData?.roleId?.name }}</span>
                    </div>
                </div>
                <div class="sign-count">签约人数{{ doctorData.signNumber }} </div>
            </div>
            <div class="tags">
                <el-tag type="warning">团队长</el-tag>
                <el-tag type="danger">高血压</el-tag>
                <el-tag type="success">老年护理</el-tag>
            </div>
            <el-button class="btn" style="margin-top: 10px;">医师详情</el-button>
        </el-card>

        <!-- 服务包管理 -->
        <div>服务包管理</div>
        <el-card class="serve" style="max-width: 340px;max-height: 200px; margin-top: 20px;">
            <!-- 右上角“使用中”标签 -->
            <div class="ribbon">使用中</div>
            <div class="card-content">
                <!-- 左侧图标区域 -->
                <div class="icon-box">
                    
                    <div class="icon">
                        
                        <div class="doc doc-1"></div>
                        <div class="doc doc-2"></div>
                        <div class="doc doc-3"></div>
                        <div class="check-mark"></div>
                    </div>
                </div>
                <!-- 右侧信息区域 -->
                <div class="info-box2">
                    <div class="title">基础包</div>
                    <div class="desc">服务对象：所有人</div>
                    <div class="tags">
                        <el-tag type="danger" effect="plain">随访服务</el-tag>
                        <el-tag type="success" effect="plain">常规护理</el-tag>
                    </div>
                    <el-button class="detail-btn">服务包详情</el-button>
                </div>
            </div>
        </el-card>
        <!-- 底部按钮 -->
        <div style="margin-top: 20px; margin-left: 20px;">
            <el-button type="primary" @click="addTeam()">保存</el-button>
            <el-button @click="$router.back">返回</el-button>
        </div>
    </el-card>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { findAgencyApi } from '../../../api/agency';
import { useGlobalStore } from '../../../store/global';
import { addTeamApi } from '../../../api/teamManage';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'

const baseURL = import.meta.env.VITE_BASE_URL



//机构数据
const AgencyData = ref([])

//新增数据
const addTeamData = ref({
    organizationId: '',
    name:'李晓明团队',
    
})

// 上传头像成功回调
const handleAvatarSuccess = (res) => {
    if (res.code == 200) {
        addTeamData.value.avatar = res.data
    }
}

//获取仓库数据
const store = useGlobalStore();

//当前登录医生的数据
const doctorData = computed(() => store.doctorInfo);


//查询机构方法
const findAgency = async () => {
    const res = await findAgencyApi()

    if (res.code == 200) {
        AgencyData.value = res.data.rows
    }
}
//添加团队
function addTeam() {
    console.log(doctorData._id);

    addTeamApi({
        ...addTeamData.value,
        leaderId: doctorData.value._id
    }).then(res => {
        if (res.code == 200) {
            ElMessage.success('添加成功！');
        }
    }).catch(res => {
        ElMessage.warning('添加失败！')
    })
}

onMounted(() => {
    findAgency()
})
</script>

<style scoped lang="scss">
.big-card {
    min-height: 100vh;
}

.teamInfo-container {
    span {
        margin: 20px 0;
    }
}

.info-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px #eee solid;

    span {
        font-size: 13px;
        color: #999999;
    }

    input {
        border: 1px #ddd solid;
        border-radius: 5px;
        width: 200px;
        height: 35px;
        margin-left: 15px;
        padding-left: 20px;

        &::-webkit-input-placeholder {
            /* Chrome/Safari */
            color: #999;
            font-size: 14px;
        }
    }

}

.avatar-uploader {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 1px dashed var(--el-border-color);
    text-align: center;
    cursor: pointer;

    .avatar {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }

    .el-icon.avatar-uploader-icon {
        font-size: 20px;
        color: #5f90d4;
        width: 60px;
        height: 60px;
        text-align: center;
    }

}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.avatar-info {
    display: flex;
    align-items: center;
    img{
        width: 60px;
        height: 60px;
    }
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.name {
    font-size: 16px;
    font-weight: bold;
    display: block;
}

.role {
    font-size: 12px;
    color: #999;
}

.sign-count {
    font-size: 14px;
    color: #666;
}

.tags {
    margin-top: 10px;
}

.btn {
    margin-left: 200px;
}

.serve {
    position: relative;
    padding: 16px;
    box-sizing: border-box;
}

/* 右上角“使用中”丝带样式 */
.ribbon {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #409eff;
    color: #fff;
    padding: 4px 12px;
    transform: translateY(-2px) translateX(2px);
    border-top-right-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 内容容器，用于放图标和信息 */
.card-content {
    display: flex;
    align-items: flex-start;
}

/* 左侧图标区域 */
.icon-box {
    margin-right: 12px;
}

/* 模拟多层文档及对勾的图标样式 */
.icon {
    position: relative;
    width: 60px;
    height: 60px;
}

.doc {
    position: absolute;
    width: 50px;
    height: 60px;
    background-color: #f5f7fa;
    border: 1px solid #e6e9ef;
    border-radius: 4px;
    padding: 4px;
    box-sizing: border-box;
}

.doc-1 {
    z-index: 3;
}

.doc-2 {
    left: 10px;
    top: 5px;
    z-index: 2;
    width: 45px;
    height: 55px;
}

.doc-3 {
    left: 20px;
    top: 10px;
    z-index: 1;
    width: 40px;
    height: 50px;
}

.check-mark {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: #409eff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

/* 右侧信息区域 */
.info-box2 {
    flex: 1;
}

/* 标题样式 */
.title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
}

/* 描述信息样式 */
.desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

/* 标签区域样式 */
.tags {
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
}

/* 详情按钮样式 */
.detail-btn {
    float: right;
}
</style>